<!-- 广场 - 直播 - 直播主页 -->
<template>
  <!-- <logo-navbar title=""></logo-navbar> -->
  <z-navbar bgColor='linear-gradient(0deg, #fffbee 0%, #faf9f7 100%)' title="直播"></z-navbar>
  <view class="flex flex-col items-center py-4 bg-home">
    <u-image width="686" height="260" border-radius="12" :src="state.detailData?.cover_image"></u-image>
    <view class="mt-6 c-#333 text-28">距离<text class="mx-2 c-#f4af22 text-28">{{ state.detailData?.start_time
    }}</text>直播开始还有</view>
    <view class="mt-5 flex items-center c-#666 text-32">
      <view class="label-time">{{ state.days }}</view>天
      <view class="label-time">{{ state.hours }}</view>时
      <view class="label-time">{{ state.minutes }}</view>分
      <view class="label-time">{{ state.seconds }}</view>秒
    </view>
    <view class="mt-6 c-@666 text-24">{{ state.detailData?.applicants_number }}人已预约</view>
    <view class="flex my-4">
      <button class="u-reset-button button-style bg-#F8DC61 mr-4" open-type="share">邀请好友一起看</button>
      <view v-if="state.detailData?.live_status == 0" class="button-style bg-#f4af22"
        @click="state.showQrcodeModal = true">开播提醒</view>
      <view v-if="state.detailData?.live_status == 1" class="button-style bg-#FC6043 flex" @click="onView">
        <u-image width="29" height="32" class="mr-2" src="/package_square/static/images/ic_live.png"></u-image>
        正在直播
      </view>
    </view>
    <view class="w-full h-12 bg-#f5f5f5"></view>
    <view class="px-4 py-4">
      <view class="text-40 c-#333">{{ state.detailData?.title }}</view>
      <view class="my-2 text-28 c-#333">{{ state.detailData?.introduction }}</view>
      <u-image width="686" height="453" :src="state.detailData?.poster_image"></u-image>
    </view>
  </view>
  <view class="h-150 bg-#f6f6f6"></view>
  <view class="bottom-wrap-16 w-full bg-#fff border-top px-4">
    <view v-if="state.detailData?.live_status == 0 && !state.detailData?.already_appointment" class="button-vip"
      @click="onApply">预约</view>
    <view v-if="state.detailData?.live_status == 0 && state.detailData?.already_appointment" class="button-vip"
      @click="onCancel">取消预约</view>
    <view v-if="state.detailData?.live_status == 1 && state.detailData?.already_appointment" class="button-vip"
      @click="onView">前去观看</view>
  </view>
  <!-- 绑定公众号弹窗 -->
  <u-modal v-model="state.showQrcodeModal" :show-title="false" border-radius="12" :show-confirm-button="false">
    <view class="slot-content">
      <view @click="state.showQrcodeModal = false" class="absolute top-0 right-17 w-166 h-166 flex justify-end">
        <image class="mt-3 mr-2 w-22 h-22" src="/static/images/home/ic_delete.png" />
      </view>
      <image @click="previewImage(['/package_square/static/images/img_live.png'], 0)" class="w-432 h-432 mb-2"
        src="/package_square/static/images/img_live.png"></image>
      <view class="c-#333 text-sm text-center">不错过更新和直播，长按保存二维码，扫码关注“拓普旺跨境服务”视频号，时刻关注Hi Quick精彩内容！</view>
    </view>
  </u-modal>
</template>
<script setup>
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration';
dayjs.extend(duration)
import { showToast, navigate, previewImage } from '@/common/util/uni';
import { getLiveDetail, postLiveApply, postLiveCancel } from '@/common/http/module/square';
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const state = reactive({
  days: '',
  hours: '',
  minutes: '',
  seconds: '',
  showQrcodeModal: false,
  detailData: null,
  timer: null
})

function onApply () {
  uni.showModal({
    content: '确定要预约吗？',
    confirmText: '确定',
    cancelText: '取消',
    confirmColor: '#F4AF22',
    success: ({ cancel }) => {
      if (cancel) return;
      postLiveApply({ live_id: state.id }).then(() => {
        showToast('预约成功');
        refresh();
        navigate(`/package_user/pages/learning/index?currentIndex=1`)
      });
    },
  });
}

function onCancel () {
  uni.showModal({
    content: '确定要取消预约吗？',
    confirmText: '确定',
    cancelText: '取消',
    confirmColor: '#F4AF22',
    success: ({ cancel }) => {
      if (cancel) return;
      postLiveCancel({ live_id: state.id }).then(() => {
        showToast('取消预约成功');
        refresh();
        navigate(`/package_user/pages/learning/index?currentIndex=1`)
      });
    },
  });
}

function onView () {
  wx.openChannelsLive({
    finderUserName: state.detailData?.video_no,
    success: function (res) {
      console.log('跳转直播成功', res)
    }
  })
}

function countDown () {
  state.timer = setInterval(() => {
    const nowTime = dayjs(new Date())
    const startTime = dayjs(state.detailData?.start_time)
    const duration = dayjs.duration(startTime.diff(nowTime), 'milliseconds')
    if (nowTime.isBefore(startTime)) {
      state.days = duration.days()
      state.hours = duration.hours()
      state.minutes = duration.minutes()
      state.seconds = duration.seconds()
    } else {
      clearInterval(state.timer)
      loadDetail()
      state.days = '00'
      state.hours = '00'
      state.minutes = '00'
      state.seconds = '00'
    }
  }, 1000)
}

function getShareContent () {
  return {
    title: '加入八零学社，学习专业的外贸知识',
    imageUrl: '/static/images/common/img_share.jpg',
    path: `/pages/index/index?parentId=${userStore.userInfo?.id}`
  }
}

function loadDetail () {
  getLiveDetail(state.id).then((res) => {
    state.detailData = res.data;
  });
}

function refresh () {
  loadData()
}

function loadData () {
  getLiveDetail(state.id).then((res) => {
    state.detailData = res.data;
    countDown()
  });
}

onLoad((options) => {
  state.id = options.id;
  loadData();
});

onShareAppMessage(() => getShareContent())
onShareTimeline(() => getShareContent())
</script>

<style lang="scss" scoped>
.slot-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 40rpx 40rpx;
}

.bg-home {
  height: auto;
  background: linear-gradient(0deg, rgba(246, 246, 246, 1) 0%, rgba(249, 249, 249, 1) 50.76%, rgba(255, 251, 239, 1) 97.54%, rgba(255, 251, 238, 1) 100%);
}

.label-time {
  width: 55rpx;
  height: 55rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F4AF22;
  font-size: 32rpx;
  background-color: #e5e5e5;
  border-radius: 12rpx;
  margin: 0 20rpx;
}

.button-style {
  width: 300rpx;
  height: 68rpx;
  border-radius: 12rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-vip {
  width: 686rpx;
  height: 68rpx;
  border-radius: 10rpx;
  background-color: #F4AF22;
  color: #fff;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.border-top {
  border-top: 2rpx solid #eee;
}
</style>
